<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>车辆管理</title>
	<link rel="stylesheet" href="${cxt }/css/iconfont.css" />
	<link rel="stylesheet" href="${cxt }/css/llp_basepage.css" />
	<script type="text/javascript" src="${cxt }/js/iconfont.js" ></script>
	<script type="text/javascript" src="${cxt }/js/jquery-3.2.1.js" ></script>
	<script type="text/javascript">
		$(function(){
			
			$("#query").click(function(){
				$.ajax({
					url:"${cxt}/backstage/carmanageservlet",
					success:function(data){
						$("#table").empty();
						for(var i=0;i<data.length;i++){
						$("#table").append(
							'	<tr>'+
							'		<td>'+data[i].car_id+'</td>'+
							'		<td>'+data[i].car_model_id+'</td>'+
							'		<td>'+data[i].car_type+'</td>'+
							'		<td>'+data[i].store_id+'</td>'+
							'		<td>'+data[i].car_status+'</td>'+
							'		<td>'+data[i].store_city+'</td>'+
							'		<td>'+data[i].store_name+'</td>'+
							'		<td>'+data[i].store_person+'</td>'+
							'		<td>'+
							'			<input class="select" type="button" value="详细信息" />'+
							'		</td>'+
							'		<td>'+
							'			<input class="update" type="button" value="修 改" />'+
							'			<input class="delete" type="button" value="删 除"/>'+
							'		</td>'+
							'	</tr>'
						)
						}
					},
					dataType:"json",
					data: {carid:$("#carid").val()}
				})
			})
			
			$("#insert").click(function(){
				$.ajax({
					url:"${cxt}/backstage/carmanageservlet2",
					success:function(data){
						console.log(data)
						for(var i=0;i<data.modelid.length;i++){
							$("#modelid").append('<option>'+data.modelid[i].car_model_id+'</option>')
						}
						for(var i=0;i<data.storeid.length;i++){
							$("#storeid").append('<option>'+data.storeid[i].store_id+'</option>')
						}
					},
					dataType:"json",
				})
				var $div=$("<div class='quxiao'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
				$("body").append($div);
				$("#tianjia").css("display","block");
			})
			
			$("#queding2").click(function(){
				$("#tianjia").css("display","none");
				$("#tjcg").css("display","block");
			})
			
			$("#quxiao2").click(function(){
				$(".quxiao").css("display","none");
				$("#tianjia").css("display","none");
			})
			
			$("#queren2").click(function(){
				var carid1 = $("#carid1").val();
				$("input[name=carid1]").val(carid1);
				var modelid = $("#modelid").val();
				$("select[name=modelid]").val(modelid);
				var type1 = $("#type1").val();
				$("input[name=type1]").val(type1);
				var storeid = $("#storeid").val();
				$("select[name=storeid]").val(storeid);
				$("#tjxx").submit();
				$(".quxiao").css("display","none");
				$("#tjcg").css("display","none");
			})
			
			$(document).on("click",".select",function(){
				var carmodelid=$(this).parents("tr").find("td:eq(1)").text();
				$.ajax({
					url:"${cxt}/backstage/carmanageservlet",
					type:"post",
					dataType:"json",
					data: {carmodelid:carmodelid},
					success:function(data){
						$("#name").val(data.car_model_name);
						$("#type").val(data.car_model_type);
						$("#year").val(data.car_model_year);
						$("#seating").val(data.car_model_seating);
						$("#number").val(data.car_model_door_number);
						$("#fuel").val(data.car_model_fuel_type);
						$("#gps").val(data.car_model_gps);
						$("#seat").val(data.car_model_seat);
						$("#image").val(data.car_model_image);
						$("#cash").val(data.car_model_rent_cash);
						$("#insurance").val(data.car_model_insurance);
						$("#discount").val(data.company_discount);
						$("#pledge").val(data.car_model_pledge);
					},
				})
				var $div=$("<div class='quxiao'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
				$("body").append($div);
				$("#chakan").css("display","block");
			})
			
			$(document).on("click",".update",function(){
				var carid=$(this).parents("tr").find("td:eq(0)").text();
				alert(carid)
				$.ajax({
					url:"${cxt}/backstage/carmanageservlet3",
					dataType:"json",
					data: {carid:carid},
					success:function(data){
						$("#carid2").val(data.car_id);
						$("#modelid1").val(data.car_model_id);
						$("#type2").val(data.car_type);
						$("#storeid1").val(data.store_id);
					},
				})
				var $div=$("<div class='quxiao'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
				$("body").append($div);
				$("#xiugai").css("display","block");
			})
			
			$("#queding3").click(function(){
				$("#xiugai").css("display","none");
				$("#xgcg").css("display","block");
			})
			
			$("#quxiao3").click(function(){
				$(".quxiao").css("display","none");
				$("#xiugai").css("display","none");
			})
			
			$("#queren3").click(function(){
				var carid2 = $("#carid2").val();
				$("input[name=carid2]").val(carid2);
				var modelid1 = $("#modelid1").val();
				$("input[name=modelid1]").val(modelid1);
				var type2 = $("#type2").val();
				$("input[name=type2]").val(type2);
				var storeid1 = $("#storeid1").val();
				$("input[name=storeid1]").val(storeid1);
				$("#xgxx").submit();
				$(".quxiao").css("display","none");
				$("#xgcg").css("display","none");
			})
			
			$("#queren").click(function(){
				$(".quxiao").css("display","none");
				$("#chakan").css("display","none");
			})
			
			$(document).on("click",".delete",function(){
				var carid=$(this).parents("tr").find("td:eq(0)").text();
 				$.ajax({
					data:{"carid":carid},
					url:"${cxt}/backstage/carmanageservlet1",
				}) 
				var $div=$("<div class='quxiao'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
				$("body").append($div);
				$("#qdsc").css("display","block");
			})
			
			$("#queding1").click(function(){
				$("#qdsc").css("display","none");
				$("#sccg").css("display","block");
			})
			
			$("#quxiao1").click(function(){
				$(".quxiao").css("display","none");
				$("#qdsc").css("display","none");
			})
			
			$("#queren1").click(function(){
				$("#scxx").submit();
				$(".quxiao").css("display","none");
				$("#sccg").css("display","none");
			})
		})
	</script>
	<style type="text/css">
		.tianjia{
			width:400px;
			height:270px;
			position:absolute;
			top:100px;
			left:200px;
			z-index:99;
			display:none;
			border:1px solid #dadada;
			background:#fff;
			text-align: center;
		}
		.chakan{
			width:400px;
			height:550px;
			position:absolute;
			top:0;
			left:200px;
			z-index:99;
			display:none;
			border:1px solid #dadada;
			background:#fff;
			text-align: center;
		}
		.input{
			text-align:right;
		}
		select{
			height:20px;
			width:100px;
			margin:10px 164px 0 0;
			}
		.input input {
			height:30px;
			width:200px;
			margin:10px 58px 0 0;
			text-indent:10px;
			border: 1px solid;
		}
		.qd{
	   		height: 30px;
	    	line-height: 30px;
			font-size: 12px;
			text-indent:0;
			width:80px;
		    color: #fff;
		    border: none;
		    border-radius: 2px;
		    background: #6ab0ff;
		    margin-top: 10px;
		}
		.tjcg{
			width:200px;
			height:120px;
			position:absolute;
			top:100px;
			left:300px;
			z-index:99;
			display:none;
			border:1px solid #dadada;
			background:#fff;
			text-align: center;
		}
	</style>
</head>
<body>
<div class="contentdiv">
	<div class="top">
		<i class="iconfont icon-jibenshezhi"></i>
		<span>普通车辆管理</span>
	</div>
	<div class="center">
		<div class="centertop">
			<div>
				<input type="button" value="+添加" id="insert"/>
			</div>
			<div class="find">
				<input class="findtext" type="text" id="carid" placeholder="请输入车牌号"/>
				<input type="button"  value="查 询" id="query"/>
				<a href="${cxt}/backstage/selfDrivingcar"><input type="button"  value="查询全部"/></a>
			</div>
		</div>

		<div class="centerbutt">
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<th>车牌号</th>
					<th>车型编号</th>
					<th>类型</th>
					<th>门店编号</th>
					<th>车状态</th>
					<th>门店城市</th>
					<th>门店名称</th>
					<th>店长</th>
					<th>其他操作</th>
					<th>操作</th>
				</tr>
				<tbody id="table">
				<c:forEach items="${carManage}" var="carManage">
				<tr>
					<td>${carManage.car_id}</td>
					<td>${carManage.car_model_id}</td>
					<td>${carManage.car_type}</td>
					<td>${carManage.store_id}</td>
					<td>${carManage.car_status}</td>
					<td>${carManage.store_city}</td>
					<td>${carManage.store_name}</td>
					<td>${carManage.store_person}</td>
					<td>
						<input class="select" type="button" value="详细信息" />
					</td>
					<td>
						<input class="update" type="button" value="修 改" />
						<input class="delete" type="button" value="删 除"/>
					</td>
				</tr>
				</c:forEach>
				</tbody>
			</table>
		</div>
	</div>

	<form action="${cxt }/backstage/carmanageservlet2" method="post" id="tjxx">
	<div class="tianjia" id="tianjia">
		<br>
		<h3>添加信息</h3>
		<div class="input">
			车牌号：<input type="text" id="carid1">
				<input type="hidden" name="carid1"><br>
			车型编号：<select name="modelid" id="modelid"></select><br>
			类型：<input type="text" id="type1">
				<input type="hidden" name="type1"><br>
			门店编号：<select name="storeid" id="storeid"></select><br>
		</div>
		<input class="qd" type="button" value="确认" id="queding2"/>
		<input class="qd" type="button" value="取消" id="quxiao2"/>
	</div>
	<div class="tjcg" id="tjcg">
		<br>
		<h3>添加成功！</h3><br>
		<input class="qd" type="button" value="确认" id="queren2"/>
	</div>
	</form>

	<form action="${cxt}/backstage/carmanageservlet3" method="post" id="xgxx">
	<div class="tianjia" id="xiugai">
		<br>
		<h3>修改信息</h3>
		<div class="input">
			车牌号：<input type="text" id="carid2">
				<input type="hidden" name="carid2"><br>
			车型编号：<input type="text" id="modelid1">
				<input type="hidden" name="modelid1"><br>
			类型：<input type="text" id="type2">
				<input type="hidden" name="type2"><br>
			门店编号：<input type="text" id="storeid1">
				<input type="hidden" name="storeid1"><br>
		</div>
		<input class="qd" type="button" value="确认" id="queding3"/>
		<input class="qd" type="button" value="取消" id="quxiao3"/>
	</div>
	<div class="tjcg" id="xgcg">
		<br>
		<h3>修改成功！</h3><br>
		<input class="qd" type="button" value="确认" id="queren3"/>
	</div>
	</form>

	<div class="chakan" id="chakan">
		<br>
		<h3>详细信息</h3>
		<div class="input">
			车型名称：<input type="text" id="name" readonly="readonly"><br>
			品牌：<input type="text" id="type" readonly="readonly"><br>
			年代款：<input type="text" id="year" readonly="readonly"><br>
			座位数：<input type="text" id="seating" readonly="readonly"><br>
			车门数：<input type="text" id="number" readonly="readonly"><br>
			燃料类型：<input type="text" id="fuel" readonly="readonly"><br>
			GPS导航：<input type="text" id="gps" readonly="readonly"><br>
			座椅：<input type="text" id="seat" readonly="readonly"><br>
			车图片：<input type="text" id="image" readonly="readonly"><br>
			日均租金：<input type="text" id="cash" readonly="readonly"><br>
			基本保险：<input type="text" id="insurance" readonly="readonly"><br>
			自选折扣：<input type="text" id="discount" readonly="readonly"><br>
			押金：<input type="text" id="pledge" readonly="readonly"><br>
		</div>
		<input class="qd" type="button" value="确认" id="queren"/>
	</div>
	
	<form action="${cxt }/backstage/selfDrivingcar" method="post" id="scxx">
	<div class="tjcg" id="qdsc">
		<br>
		<h3>确定删除吗？</h3><br>
		<input class="qd" type="button" value="确定" id="queding1"/>
		<input class="qd" type="button" value="取消" id="quxiao1"/>
	</div>
	<div class="tjcg" id="sccg">
		<br>
		<h3>删除成功！</h3><br>
		<input class="qd" type="button" value="确认" id="queren1"/>
	</div>
	</form>
</div>
</body>
</html>